{{#use "swfupload"}}
{{#link "swfupload/swfupload.css"}}
{{use "fancyupload"}}
{{link "fancyupload/script.js"}}
{{link "fancyupload/style.css"}}
<div id="task-detail" class="subcl">
    <div class="clearfix task-line">
        <div class="label">Title:</div>
        <div class="editable content" id="task-title">{{=item.title}}</div>
    </div>
    <div class="clearfix task-line">
        <div class="label">Content:</div>
        <div class="content editable" id="task-content" >
            {{from uliweb.utils.textconvert import text2html}}
            {{<< text2html(item.content) or '(Click here to edit)'}}
        </div>
    </div>
    <div class="clearfix task-line">
        {{use "datepicker"}}
        <div class="label">Due Date:</div>
        <div id="task-duedate" class="content-common">
            <span id="timesince" style="float:left">{{<< item.due_date_timesince}}</span>
            <img src="{{=url_for_static('datepicker/calendar.gif')}}" class='date_toggler' style="float:right; position: relative; top: 2px; margin-left: 4px;"/>
            <input style="float:right" id='task-duedate' type='text' value='{{if item.due_date:}}{{=item.due_date}}{{pass}}' class='date_toggled'/>
        </div>
    </div>
    <div class="clearfix task-line">
        <div class="label">Tag:</div>
        <div class="content editable" id="task-tag">
            {{=' '.join(item.get_tags()) or '(Click here to edit)'}}
        </div>
    </div>
    <div class="clearfix task-line">
        <div class="label">Attatchments:</div>
        <div class="content-common" id="task-files">
            <ul id="file-list"></ul>
            <a href="#" id="file-attach">Add a file</a>
            <a href="#" id="file-attach-2" style="display: none;">Add a file</a>
        </div>
    </div>
</div>
<script type="text/javascript">
window.addEvent('domready',function(){
	var updateHtml = function(element, input){
		var request = {
            type:'edit',
            name:element.get('id'),
			content:input.value
		};
		new Request.JSON({
            url:"{{=url_for('doto.views.doto_save', id=item.id)}}",
            data:request,
			onComplete:function(response){
				if(!response.success) alert(response.message);
                else element.set('html', response.content || '(Click here to edit)');
			}
		}).post();
	};
    
    var loadHtml = function(element, input){
        var request = {
            type:'load',
            name:element.get('id')
        };
        new Request.JSON({
            url:"{{=url_for('doto.views.doto_get', id=item.id)}}",
            data:request,
            onComplete:function(response){
                if(!response.success) alert(response.message);
                else input.value = response.content;
            }
        }).post();
    };
	
	$$('.editable').each(function(el){
		el.addEvent('click',function(){this.inlineEdit({
				onComplete:updateHtml,
                onLoad:loadHtml,
				stripHtml:true
			});
		});
	});
    
    uploader("{{=url_for_static('fancyupload/Swiff.Uploader.swf')}}",
        "{{=url_for('doto.views_upload.doto_upload', id=item.id)}}",
        "{{=settings.SESSION_COOKIE.cookie_id}}", {{=settings.UPLOAD.FILESIZE}});
    
    get_todo_files("{{=url_for('doto.views_upload.doto_get_todofiles', id=item.id)}}");
    
    //add datepicker support
    var dpicker = new DatePicker('.date_toggled', {
        pickerClass: 'datepicker_vista',
        allowEmpty: true,
        toggleElements: '.date_toggler',
        timePicker:true,
        format:'Y-m-d H:i',
        inputOutputFormat:'Y-m-d H:i',
        onSelect:function(d){
            var d = dpicker.format(d, dpicker.options.format);
            var id = 'task-duedate';
            var request = {
                      type:'edit',
                      name:id,
                content:d
            };
            new Request.JSON({
                      url:"{{=url_for('doto.views.doto_save', id=item.id)}}",
                      data:request,
                onComplete:function(response){
                    if(!response.success) alert(response.message);
                    else{
                        $('timesince').set('html', response.content);
                    }
                }
            }).post();
            
        }
    });
    
});
</script>
